<template>
  <div class="cartControl">
    <div class="cart_decrease iconfont" @click="reduceGoods()">&#xe644;</div>
    <span class="cart_count">{{ this.cartGoods[this.index].count }}</span>
    <div class="cart_add iconfont" @click="addGoods()">&#xe65b;</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'CartControl',
  props: ['good', 'id', 'index'],
  computed: {
    ...mapState(['cartGoods'])
  },
  methods: {
    reduceGoods () {
      const obj = {
        itemId: this.id
      }
      if (this.cartGoods[this.index].count <= 1) {
        this.$confirm('您是否要删除已选中商品', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: '',
          center: true
        }).then(() => {
          obj.flag = true
          this.$store.commit('reduceGoods', obj)
        }).catch(() => {})
      } else {
        obj.flag = false
        this.$store.commit('reduceGoods', obj)
      }
      this.$forceUpdate()
    },
    addGoods () {
      this.$store.commit('addGoods', this.id)
      this.$forceUpdate()
    }
  }
}
</script>

<style lang="less" scoped>
// 加减计数区域
.cartControl {
  position: absolute;
  bottom: .4rem;
  right: 0;
}
// 添加和减少按钮
.cart_decrease,
.cart_add {
  display: inline-block;
  width: .8rem;
  height: .8rem;
  line-height: .8rem;
  font-size: .56rem;
  font-weight: 600;
  text-align: center;
  border: 1px solid #eee;
  border-radius: .4rem;
}
// 商品数量
.cart_count {
  display: inline-block;
  font-size: .64rem;
  margin: 0 .4rem;
}
</style>
